<!-- 地址选择器 -->
<template>
  <u-popup :modelValue="show" :maskCloseAble="maskCloseAble" mode="bottom" length="auto"
    :safeAreaInsetBottom="safeAreaInsetBottom" border-radius="32" z-index="99999" @close="emit('close')">
    <view class="u-datetime-picker">
      <view class="u-picker-header" @touchmove.stop.prevent="">
        <view class="u-btn-picker u-btn-picker--tips" :style="{ color: '#333' }" hover-class="u-opacity"
          :hover-stay-time="150" @tap="emit('close')">取消</view>
        <view class="u-picker__title">{{ title }}</view>
        <view class="u-btn-picker u-btn-picker--primary" :style="{ color: moving ? '#333' : '#F4AF22' }"
          hover-class="u-opacity" :hover-stay-time="150" @touchmove.stop="" @tap.stop="onConfirm">
          确认 </view>
      </view>
      <view class="u-picker-body">
        <picker-view :value="pickVal" @change="bindChange" class="u-picker-view">
          <picker-view-column>
            <view class="u-column-item" v-for="(item, index) in provinces" :key="index">
              <view class="u-line-1">
                {{ item.name }}
              </view>
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="u-column-item" v-for="(item, index) in cities" :key="index">
              <view class="u-line-1">
                {{ item.name }}
              </view>
            </view>
          </picker-view-column>
          <picker-view-column v-if="showArea">
            <view class="u-column-item" v-for="(item, index) in areas" :key="index">
              <view class="u-line-1">
                {{ item.name }}
              </view>
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </u-popup>
</template>
<script setup>
import { getRegionList } from '@/common/http/module/common'

const props = defineProps({
  // 通过双向绑定控制组件的弹出与收起
  show: {
    type: Boolean,
    default: false
  },
  safeAreaInsetBottom: {
    type: Boolean,
    default: false
  },
  // 是否允许通过点击遮罩关闭Picker
  maskCloseAble: {
    type: Boolean,
    default: true
  },
  showArea: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['close', 'confirm'])

const moving = ref(false)
const provinces = ref([])
const cities = ref([])
const areas = ref([])

const province = ref(0)
const city = ref(0)
const area = ref(0)

const pickVal = ref([0, 0, 0])

watch(province, (newVal, oldVal) => {
  if (newVal !== oldVal) loadCitys(provinces.value[newVal].id)
})
watch(city, (newVal, oldVal) => {
  if (newVal !== oldVal && props.showArea) loadAreas(cities.value[newVal].id)
})

function loadProvinces() {
  getRegionList().then(res => {
    const data = res.data
    provinces.value = data
    loadCitys(data[0].id)
  })
}
function loadCitys(pid) {
  getRegionList(pid).then(res => {
    const data = res.data
    cities.value = data
    if (props.showArea) {
      loadAreas(data[0].id)
    }
  })
}
function loadAreas(pid) {
  getRegionList(pid).then(res => {
    const data = res.data
    areas.value = data
  })
}

function bindChange(e) {
  const data = e.detail.value
  pickVal.value = data;
  province.value = data[0];
  city.value = data[1];
  area.value = data[2];
}

function onConfirm() {
  let result = {
    province: provinces.value[province.value],
    city: cities.value[city.value],
    area: areas.value[area.value],
  }
  emit('confirm', result);
  emit('close')
}

onMounted(() => loadProvinces())

</script>

<style lang="scss" scoped>
@import '@/uni_modules/vk-uview-ui/libs/css/style.components.scss';

.u-datetime-picker {
  position: relative;
  z-index: 999;
}

.u-picker-view {
  height: 100%;
  box-sizing: border-box;
}

.u-picker-header {
  display: flex;
  width: 100%;
  height: 90rpx;
  padding: 0 40rpx;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 30rpx;
  background: #fff;
  position: relative;
}

.u-picker-header::after {
  content: '';
  position: absolute;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 0;
}

.u-picker-body {
  width: 100%;
  height: 500rpx;
  overflow: hidden;
  background-color: #fff;
}

.u-column-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  padding: 0 8rpx;
}

.u-text {
  font-size: 24rpx;
  padding-left: 8rpx;
}

.u-btn-picker {
  padding: 16rpx;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

.u-opacity {
  opacity: 0.5;
}

.u-btn-picker--primary {
  color: #FF6720;
}
</style>
